<template>
    <div class="container_box" id="video_box">
        <a href="">
            <img src="http://npjy.oss-cn-beijing.aliyuncs.com/images/file-15807175142891GIFp.png" class="back_i" alt="">
        </a>
        <div class="van_swipe">
            <!--vant van-swipe 滑动组件 -->
            <van-swipe :show-indicators="false" @change="onChange" vertical :loop="false">
                <van-swipe-item v-for="(item, index) in videoList" :key="index" class="product_swiper">
                    <div class="video_container">
                        <!--video属性
                    webkit-playsinline ios 小窗播放，使视频不脱离文本流，安卓则无效
                    微信内置x5内核，
                    x5-video-player-type="h5-page" 启用H5播放器,是wechat安卓版特性，添加此属性，微信浏览器会自动将视频置为全屏
                    x5-video-player-fullscreen="true" 全屏设置，设置为 true 是防止横屏
                    x5-video-orientation 控制横竖屏 landscape 横屏，portrain竖屏； 默认portrain
                    poster：封面
                    src：播放地址
                    -->
<!--                        <video class="video_box" webkit-playsinline="true" x5-video-player-type="h5-page"-->
<!--                               x5-video-player-fullscreen="true" playsinline preload="auto"-->
<!--                               :poster="item.cover" :src="item.url" :playOrPause="playOrPause"-->
<!--                               @click="pauseVideo" @ended="onPlayerEnded($event)"-->
<!--                        >-->
<!--                        </video>-->

                        <video controls="controls" preload="auto" :poster="item.cover" x5-video-player-fullscreen="true"
                               webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-playsinline
                               class="video_box" :src="item.url" @click="pauseVideo" @ended="onPlayerEnded($event)">  
<!--                            <source src="item.url"  type="video/mp4"/> -->
                        </video>

                        <!-- 封面 -->
                        <!--                        <img v-show="isVideoShow" class="play" @click="playvideo" :src="item.cover"/>-->
                        <!-- 播放暂停按钮 -->
                        <img v-show="iconPlayShow" class="icon_play" @click="playvideo"
                             src="http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575340653940esdHR.png"/>
                    </div>
                    <!-- 右侧头像、点赞、评论、分享功能 -->
                    <div class="tools_right">
                        <div class="tools_r_li">
                            <img :src="item.tag_image" class="tag_image">
                            <i class="iconfont icon-jiahao tag_add" v-show="!item.tagFollow"
                               @click="checkSubscribe(item,index)"></i>
                            <i class="iconfont icon-duihao tag_dui" v-show="item.tagFollow"
                               :class="item.tagFollow?'tag_dui_active':''"></i>
                        </div>
                        <div class="tools_r_li" @click="changeFabulous(item,index)">
                            <i class="iconfont icon-shoucang icon_right"
                               :class="item.fabulous?'fabulous_active':''"></i>
                            <div class="tools_r_num">52.1w</div>
                        </div>
                        <div class="tools_r_li" @click="changeComment">
                            <i class="iconfont icon-liuyan icon_right icon_right_change"></i>
                            <div class="tools_r_num">12.5w</div>
                        </div>
                        <div class="tools_r_li" @click="changeShare">
                            <i class="iconfont icon-iconfontforward icon_right"></i>
                            <div class="tools_r_num">22.2w</div>
                        </div>
                    </div>
                    <!-- 底部作品描述 -->
                    <div class="production_box">
                        <div class="production_name">
                            @{{item.author}}
                        </div>
                        <div class="production_des">
                            {{item.des}}
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
            <!--底部操作栏-->
<!--            <div class="container_bottom">-->
<!--                <div class="border_progress" :style="'width:'+videoProcess+'%'"></div>-->
<!--                                <div class="bottom_tab" :class="tabIndex==0?'tab_active':''" @click="changeTab(0)">-->
<!--                                    <span class="bottom_tab_span ">首页</span>-->
<!--                                </div>-->
<!--                                <div class="bottom_tab" :class="tabIndex==1?'tab_active':''" @click="changeTab(1)">-->
<!--                                    <img src="http://oss.jishiyoo.com/images/file-1575427746903.png" alt="" class="bottom_tab_icon">-->
<!--                                </div>-->
<!--                                <div class="bottom_tab" :class="tabIndex==2?'tab_active':''" @click="changeTab(2)">-->
<!--                                    <span class="bottom_tab_span">我的</span>-->
<!--                                </div>-->
<!--            </div>-->
            <!--分享弹框-->
            <div class="share_box" :class="showShareBox?'share_active':''">
                <div class="share_tips">分享到</div>
                <ul class="share_ul">
                    <li class="share_li pengyouquan_li">
                        <i class="iconfont icon-pengyouquan pengyouquan"></i>
                    </li>
                    <li class="share_li">
                        <i class="iconfont icon-weixin weixin"></i>
                    </li>
                    <li class="share_li" @click="copyUrl">
                        <i class="iconfont icon-lianjie lianjie"></i>
                    </li>
                    <div class="clear"></div>
                </ul>
                <div class="share_cancel" @click="cancelShare">取消</div>
            </div>
            <!--留言弹窗-->
            <van-popup v-model="commentPop" closeable :overlay="true" class="comment_container" position="bottom">
                <div class="comment_box">
                    <div class="comment_top">
                        12.5w条评论
                        <i class="iconfont icon-guanbi1 guanbi3" @click="closeComment"></i>
                    </div>
                    <ul class="comment_ul">
                        <div v-if="videoComment.length!=0">
                            <transition-group appear>
                                <li class="comment_li" v-for="(item,index) in videoComment" :key="index"
                                    @click="replayUser(item,index,-1)">
                                    <div class="comment_author_left">
                                        <img :src="item.avatar">
                                    </div>
                                    <div class="comment_author_right">
                                        <div class="comment_author_top">
                                            <div class="comment_author_name">@{{item.nickname}}</div>
                                            <div class="icon-shoucang1_box" @click.stop="commentLove(item,index,-1)">
                                                <div class="icon_right_change"
                                                     :class="item.love_comment?'love_active':''">
                                                    <i class="iconfont icon-shoucang icon-shoucang1"></i>
                                                </div>
                                                <div class="shoucang1_num">{{item.love_count}}</div>
                                            </div>
                                        </div>
                                        <div class="comment_author_text">
                                            {{item.comment_content}}<span>{{item.create_time}}</span></div>
                                    </div>
                                    <div class="clear"></div>
                                    <div class="comment_replay_box">
                                        <transition-group appear>
                                            <div class="comment_replay_li" v-for="(item2,index2) in item.child_comment"
                                                 :key="index2" @click.stop="replayUser(item2,index,index2)">
                                                <div class="comment_replay_left">
                                                    <img :src="item2.avatar">
                                                </div>
                                                <div class="comment_replay_right">
                                                    <div class="comment_replay_top">
                                                        <div class="comment_replay_name">@{{item2.nickname}}</div>
                                                        <div class="icon-shoucang1_box"
                                                             @click.stop="commentLove(item2,index,index2)">
                                                            <div class="icon_right_change"
                                                                 :class="item2.love_comment?'love_active':''">
                                                                <i class="iconfont icon-shoucang icon-shoucang1"></i>
                                                            </div>
                                                            <div class="shoucang1_num">{{item2.love_count}}</div>
                                                        </div>
                                                    </div>
                                                    <div class="comment_replay_text">
                                                        <span v-if="item.user_id!=item2.be_commented_user_id && item.user_id!=item2.user_id">回复 {{item2.be_commented_nickname}}：</span>
                                                        {{item2.comment_content}}
                                                        <span>{{item2.create_time}}</span></div>
                                                </div>
                                                <div class="clear"></div>
                                            </div>
                                        </transition-group>
                                    </div>
                                </li>
                            </transition-group>
                        </div>
                        <div class="no_message" v-if="videoComment.length==0">
                            <i class="iconfont iconfont_style icon-zanwupinglun"></i>
                            <div class="no_message_tips">暂无评论</div>
                        </div>
                    </ul>
                </div>
            </van-popup>
            <!--留言输入-->
            <div class="comment_input_box_hover"></div>
            <div class="comment_input_box" v-show="commentPop">
                <!--<form action="#" class="comment_form">-->
                <input :placeholder="commentPlaceholder" class="comment_input" v-model="comment_text" ref="content"
                       @keyup.enter="checkComment"/>
                <!--</form>-->
                <div class="comment_input_right" @click="checkComment">
                    <i class="iconfont icon-fasong comment_i" :class="canSend?'comment_i_active':''"></i>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from "vue";
    import {
        Swipe,
        SwipeItem,
        Toast
    } from "vant";
    // 引入微信分享
    import wx from "weixin-js-sdk";

    Vue.use(Swipe, Toast).use(SwipeItem);

    let videoProcessInterval;
    export default {
        name: "home",
        data() {
            let u = navigator.userAgent;
            return {
                current: 0,
                videoList: [{
                    url: "http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4",//视频源
                    cover: "http://oss.jishiyoo.com/images/file-1575341210559.png",//封面
                    tag_image: "http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg",//作者头像
                    fabulous: false,//是否赞过
                    tagFollow: false,//是否关注过该作者
                    author_id: 1,//作者ID
                    author: "superKM",
                    des: "武汉加油"
                }, {
                    url: "http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4",
                    cover: "http://oss.jishiyoo.com/images/file-1575343195934.jpg",
                    tag_image: "http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449298299M3V50.jpg",
                    fabulous: true,//是否赞过
                    tagFollow: false,//是否关注过该作者
                    author_id: 2,//作者ID
                    author: "superKM",
                    des: "中国加油"
                }, {
                    url: "http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4",
                    cover: "http://oss.jishiyoo.com/images/file-1575343262684.jpg",
                    tag_image: "http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg",
                    fabulous: false,//是否赞过
                    tagFollow: false,//是否关注过该作者
                    author_id: 1,//作者ID
                    author: "superKM",
                    des: "武汉加油"
                }, {
                    url: "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",
                    cover: "http://oss.jishiyoo.com/images/file-1575343508574.jpg",
                    tag_image: "http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg",
                    fabulous: false,//是否赞过
                    tagFollow: false,//是否关注过该作者
                    author_id: 1,//作者ID
                    author: "superKM",
                    des: "中国加油"
                }],
                isVideoShow: true,
                playOrPause: true,
                video: null,
                iconPlayShow: true,
                isAndroid: u.indexOf("Android") > -1 || u.indexOf("Adr") > -1, // android终端
                isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
                tabIndex: 0,
                showShareBox: false,//展示分享框
                commentPop: false,//是否展示评论弹框
                // 评论相关
                comment_text: "",//评论输入内容
                canSend: false,//是否可以发送
                videoComment: [],
                commentPlaceholder: "留下你精彩的评论吧",//评论Placeholder
                replayUserData: "",
                to_comment_id: "",
                videoProcess: 0//视频播放进度
            };
        },
        watch: {
            //监听输入变化
            comment_text(newV, oldV) {
                newV == "" ? this.canSend = false : this.canSend = true;
            }
        },
        mounted() {
            wx.config({
                debug: false,
                appId: "111",
                timestamp: "111",
                nonceStr: "111",
                signature: "111",
                jsApiList: []
            });
        },
        methods: {
            //获取评论
            getComment() {
                //setTimeout模拟Ajax请求
                setTimeout(() => {
                    let data = [{
                        "comment_id": 297,
                        "p_id": 0,
                        "comment_content": "你好，我叫蓝湛",
                        "love_count": 0,
                        "create_time": "1月前",
                        "user_id": 78634,
                        "nickname": "蓝忘机\uD83C\uDF1F",
                        "avatar": "http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg",
                        "be_commented_user_id": 0,
                        "be_commented_nickname": "",
                        "be_commented_avatar": "",
                        "child_comment": [{
                            "comment_id": 298,
                            "p_id": 296,
                            "comment_content": "蓝二公子，今天天气不错",
                            "love_count": 1,
                            "create_time": "7天前",
                            "user_id": 55163,
                            "nickname": "魏婴",
                            "avatar": "http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKPJb1k8zia02PjVibdaDJ83JIDGm0hIsY34kAlXyZMT6FMBibdw6rhdPPjpxtp6d8B75x5Kpicxp2gqw/132",
                            "be_commented_user_id": 78480,
                            "be_commented_nickname": "chenchen",
                            "be_commented_avatar": "http://thirdwx.qlogo.cn/mmopen/vi_32/icxHc0Ym1p4hQAFAUnjpxDPMkEUyojnibBj9wUSS2OmibiazdBAicSLpoicricVYP6QG6XicjTzQPx9koMPqcGfhTOy5qA/132",
                            "love_comment": true
                        }],
                        "love_comment": false
                    }, {
                        "comment_id": 281,
                        "p_id": 0,
                        "comment_content": "楼主好帅，我要嫁给你！！",
                        "love_count": 0,
                        "create_time": "1月前",
                        "user_id": 74164,
                        "nickname": "冰雪奇缘2",
                        "avatar": "http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449298299M3V50.jpg",
                        "be_commented_user_id": 0,
                        "be_commented_nickname": "",
                        "be_commented_avatar": "",
                        "child_comment": [],
                        "love_comment": false
                    }];//获取评论数据
                    this.videoComment = [...this.videoComment, ...data];
                    let to_comment_id = this.to_comment_id;
                    if (to_comment_id != 0) {
                        //从评论列表进来回复
                        this.getCommentDetail(to_comment_id);
                    }
                }, 500);
            },
            //获取单个评论
            getCommentDetail(to_comment_id) {
                let obj = {
                    action: "show_comment_info",
                    comment_id: to_comment_id
                };
                setTimeout(() => {
                    let index;
                    let item = res.data;
                    this.videoComment.map((v, i) => {
                        v.child_comment.map((v2, i2) => {
                            if (v2.comment_id == to_comment_id) {
                                index = i;
                            }
                        });
                    });
                    setTimeout(() => {
                        //对评论重新排序，存在to_comment_id的时候排至第一个
                        let firstComment = this.videoComment.splice(index, 1);
                        this.videoComment.unshift(firstComment[0]);
                        //重设回复人
                        item.index = 0;
                        item.index2 = 0;
                        this.replayUserData = item;
                        this.commentPlaceholder = `回复 @${item.nickname}：`;
                        this.$refs.content.focus();
                    }, 10);
                }, 500);
            },
            //检测评论内容
            checkComment() {
                if (this.comment_text == "") {
                    Toast("评论内容不能为空");
                } else {
                    let comment_id = 0, p_id = "", p_user_id = "", content = this.comment_text;
                    if (this.replayUserData != "") {
                        comment_id = this.replayUserData.comment_id;
                        p_id = this.replayUserData.p_id;
                        p_user_id = this.replayUserData.user_id;
                    }
                    this.sendComment(comment_id, p_id, p_user_id, content);
                }
            },
            //发送评论
            sendComment(comment_id, p_id, p_user_id, content) {
                this.comment_text = "";
                this.isSending = true;
                setTimeout(() => {
                    let newData = {
                        "comment_id": comment_id,
                        "p_id": p_id,
                        "comment_content": content,
                        "love_count": 0,
                        "create_time": "刚刚",
                        "user_id": p_user_id,
                        "nickname": "游客",//当前用户
                        "avatar": "https://profile.csdnimg.cn/B/1/E/3_ridingfish",//当前用户头像
                        "be_commented_user_id": this.replayUserData.user_id,
                        "be_commented_nickname": this.replayUserData.nickname
                    };
                    if (this.replayUserData == "") {
                        //回复作品
                        this.videoComment.splice(0, 0, newData);
                    } else {
                        let index = this.replayUserData.index;
                        let index2 = this.replayUserData.index2;
                        if (this.replayUserData.index2 == -1) {
                            //回复一级人
                            this.videoComment[index].child_comment.splice(0, 0, newData);
                        } else {
                            //回复二级人
                            this.videoComment[index].child_comment.splice(index2, 0, newData);
                        }
                    }
                    this.replayUserData = "";
                    this.isSending = false;
                }, 500);
            },
            //评论点赞
            commentLove(item, index, index2) {
                let comment_id = item.comment_id,
                    user_id = item.user_id,
                    love_comment = item.love_comment,
                    love_flag = 0;//0:取消点赞；1：点赞
                if (love_comment) {
                    //取消点赞
                    love_flag = 0;
                } else {
                    //添加点赞
                    love_flag = 1;
                }
                //setTimeout模拟Ajax请求
                setTimeout(() => {
                    if (index2 == -1) {
                        //点赞一级评论
                        this.videoComment[index].love_comment = !this.videoComment[index].love_comment;
                        if (love_flag == 1) {
                            this.videoComment[index].love_count++;
                        } else {
                            this.videoComment[index].love_count--;
                        }
                    } else {
                        //点赞二级评论
                        this.videoComment[index].child_comment[index2].love_comment = !this.videoComment[index].child_comment[index2].love_comment;
                        if (love_flag == 1) {
                            this.videoComment[index].child_comment[index2].love_count++;
                        } else {
                            this.videoComment[index].child_comment[index2].love_count--;
                        }
                    }
                }, 500);
            },
            //点击回复
            replayUser(item, index, index2) {
                item.index = index;
                item.index2 = index2;
                this.replayUserData = item;
                this.commentPlaceholder = `回复 @${item.nickname}：`;
                this.$refs.content.focus();
            },
            //弹出评论窗口
            changeComment() {
                this.commentPop = true;
                this.videoComment = [];
                this.getComment();
            },
            //关闭评论弹窗
            closeComment() {
                this.commentPop = false;
                this.commentPlaceholder = "留下你精彩的评论吧";
                this.replayUserData = "";
            },
            //关注该作者
            checkSubscribe(item, index) {
                this.videoList.map(v => {
                    v.author_id == item.author_id ? v.tagFollow = true : "";
                });
            },
            //改变菜单
            changeTab(index) {
                this.tabIndex = index;
            },
            //改变收藏状态
            changeFabulous(item, index) {
                this.videoList[index].fabulous = !this.videoList[index].fabulous;
            },
            //展示分享弹窗
            changeShare() {
                this.showShareBox = true;
            },
            //取消分享
            cancelShare() {
                this.showShareBox = false;
            },
            //滑动改变播放的视频
            onChange(index) {
                //改变的时候 暂停当前播放的视频
                clearInterval(videoProcessInterval);
                this.videoProcess = 0;
                let video = document.querySelectorAll("video")[this.current];
                video.currentTime = 0;
                video.pause();
                this.playOrPause = false;
                this.showShareBox = false;
                this.current = index;
                //非ios切换直接自动播放下一个
                // if (!this.isiOS) {
                //   this.isVideoShow = false;
                //   setTimeout(() => {
                //     this.pauseVideo();
                //   }, 100);
                // } else {
                //   //ios官方禁止video自动播放，未找到合适的方法，如果您发现了，麻烦告诉我一下谢谢啦
                //   this.playOrPause = true;
                //   this.iconPlayShow = true;
                // }

                this.isVideoShow = true;
                setTimeout(() => {
                    this.isVideoShow = false;
                    this.pauseVideo();
                }, 100);

            },
            // 开始播放
            playvideo(event) {
                let video = document.querySelectorAll("video")[this.current];
                console.log("playvideo：" + this.current);
                this.isVideoShow = false;
                this.iconPlayShow = false;
                this.showShareBox = false;
                video.play();
                window.onresize = function () {
                    video.style.width = window.innerWidth + "px";
                    video.style.height = window.innerHeight + "px";
                };
                videoProcessInterval = setInterval(() => {
                    this.changeProcess(video);
                }, 100);
                // this.dragDuration();
            },
            pauseVideo() { //暂停\播放
                try {
                    let video = document.querySelectorAll("video")[this.current];
                    console.log("pauseVideo" + this.current);
                    if (this.playOrPause) {
                        video.pause();
                        this.iconPlayShow = true;
                        clearInterval(videoProcessInterval);
                    } else {
                        // wx.ready(() => {
                        //     // 在微信的ready中进行播放 不管成功配置与否 都会执行ready
                        //     video.play();
                        // })
                        video.play();
                        video.pause();
                        setTimeout(() => {
                            video.play();
                            this.iconPlayShow = false;
                            videoProcessInterval = setInterval(() => {
                                this.changeProcess(video);
                            }, 100);
                        }, 100);
                    }
                    this.playOrPause = !this.playOrPause;
                    this.showShareBox = false;
                } catch (e) {
                    alert(e);
                }


            },
            //记录播放进度
            changeProcess() {
                let video = document.querySelectorAll("video")[this.current];
                let currentTime = video.currentTime.toFixed(1);
                let duration = video.duration.toFixed(1);
                this.videoProcess = parseInt((currentTime / duration).toFixed(2) * 100);
            },
            onPlayerEnded(player) { //视频结束
                this.isVideoShow = true;
                this.current += this.current;
            },
            //复制当前链接
            copyUrl() {
                let httpUrl = window.location.href;
                var oInput = document.createElement("input");
                oInput.value = httpUrl;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                oInput.className = "oInput";
                oInput.style.display = "none";
                alert("链接复制成功");
            },
            //进度条拖动实现
            dragDuration(){
                let durationIcon = document.querySelector('.duration-icon');
                let progress = document.querySelector('.progress');
                let duration = document.querySelector('.border_progress');
                let video = document.querySelectorAll("video")[this.current];
                let cirW = durationIcon.offsetWidth/2;
                let oL = 0;
                let rate = 0;
                let total_time = video.duration;
                durationIcon.addEventListener('touchstart',function(e){
                    let ev = e || window.event;
                    let touch = ev.targetTouches[0];
                    oL = touch.clientX - durationIcon.offsetLeft - progress.offsetLeft;//鼠标相对于拖拽圆点的偏移距离
                });
                durationIcon.addEventListener('touchmove',function(e){
                    e.preventDefault();
                    let ev = e || window.event;
                    let touch = ev.targetTouches[0];
                    let oLeft = touch.clientX - progress.offsetLeft - oL ; //滑块最左端距离父元素最左端的距离
                    let durationWidth = oLeft + cirW;
                    //拖动边界检测
                    if((oLeft - progress.offsetWidth + 16) > 0){
                        oLeft = -cirW;
                        durationWidth = 0;
                    }else if(oLeft>progress.offsetWidth- cirW){
                        oLeft = progress.offsetWidth - cirW;
                        durationWidth = progress.offsetWidth;
                    }
                    //拖动实时改变进度条
                    durationIcon.style.left = oLeft + 'px';
                    duration.style.width = durationWidth + 'px';
                    rate = durationWidth/progress.offsetWidth * 100;
                    // console.log('(rate * total_time) / 100',(rate * total_time) / 100);
                    video.currentTime = (rate * total_time) / 100;
                })
            },
            //获取视频时长
        }
    };
</script>
<style lang="css" scoped>
    video::-webkit-media-controls-enclosure {
        display: none !important;
    }
    .clear {
        clear: both;
    }

    .back_i {
        position: fixed;
        top: 20px;
        left: 10px;
        width: 28px;
        z-index: 10;
    }

    .video-player {
        height: 100vh;
        width: 100vw;
    }

    .product_swiper {
        width: 100vw;
        height: 100vh;
    }

    .van_swipe {
        width: 100vw;
        height: 100vh;
        max-width: 550px;
        margin: 0 auto;
        position: relative;
    }

    .van-swipe {
        width: 100%;
        height: 100%;
    }

    .container_box {
        width: 100vw;
        height: 100vh;
        background: #000;
    }

    .video_box {
        object-fit: fill !important;
        z-index: 999;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    video {
        object-position: 0 0;
    }

    .icon_play {
        position: absolute;
        top: 44%;
        right: 0;
        left: 0;
        bottom: auto;
        margin: auto;
        z-index: 999;
        height: 60px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
    }

    .play,
    .platStart {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
    }

    /*头像， 点赞，转发 */
    .tag_image {
        width: 50px;
        height: 50px;
        border: 1px solid #fff;
        box-sizing: border-box;
        border-radius: 50%;
        margin-bottom: 20px;
        position: relative;
        box-shadow: 0px 0px 10px #9d9d9d;
    }

    .tag_add {
        position: absolute;
        bottom: 12px;
        left: 0;
        right: 0;
        border-radius: 67px;
        display: inline-block;
        width: 18px;
        height: 18px;
        line-height: 18px;
        margin: 0 auto;
        z-index: 1;
        font-size: 20px;
        color: #f44;
        background: #fff;
    }

    .tag_dui {
        position: absolute;
        bottom: 12px;
        left: 0;
        right: 0;
        border-radius: 67px;
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        margin: 0 auto;
        z-index: 1;
        font-size: 11px;
        color: #f44;
        background: #fff;
    }

    .tag_dui_active {
        opacity: 0;
        animation: showFollow 1.4s ease-in-out 0s;
    }

    .tag_add_num {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
    }

    @keyframes showFollow {
        0% {
            opacity: 1;
            color: #fff;
            background: #F44;
            transform: rotate(-180deg) scale(1);
        }
        35% {
            opacity: 1;
            color: #f44;
            background: #fff;
            transform: rotate(0deg) scale(1.2);
        }
        80% {
            opacity: 1;
            color: #f44;
            transform: scale(1.2);
        }
        100% {
            opacity: 0;
            display: none;
            color: #f44;
            transform: scale(0);
        }
    }

    .tools_right {
        z-index: 1001;
        position: absolute;
        right: 16px;
        bottom: 180px
    }

    .tools_r_li {
        margin-bottom: 20px;
        color: #fff;
        font-size: 14px;
        position: relative;
    }

    .tools_r_li:last-child {
        margin-bottom: 0px;
    }

    .icon_right {
        margin-bottom: 5px;
        font-size: 42px;
        display: block;
        text-shadow: 0px 0px 10px #9d9d9d;
        /*transition: .5s;*/
    }

    .production_box {
        z-index: 1001;
        position: absolute;
        /* right: 16px; */
        bottom: 48px;
        text-align: left;
        padding: 0 15px 15px 15px;
        color: #fff;
        width: 100%;
        left: 0;
        box-sizing: border-box;
        /*background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));*/
        /*!* Safari 5.1 - 6.0 *!*/
        /*background: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));*/
        /*!* Opera 11.1 - 12.0 *!*/
        /*background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));*/
        /*!* Firefox 3.6 - 15 *!*/
        /*background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));*/
        /*!* 标准的语法 *!*/
    }

    .production_name {
        font-weight: 700;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .production_des {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        min-height: 62px;
        font-size: 13px;
    }

    .container_bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
        /*background: rgba(0, 0, 0, 0.85);*/
        height: 48px;
        /*border-top: 1px solid rgba(255, 255, 255, 0.7);*/
        max-width: 550px;
    }

    .production_top {
        display: inline-block;
        padding: 6px;
        margin-bottom: 5px;
        background: rgba(0, 0, 0, .3);
        border-radius: 6px;
        margin-top: 5px;
    }

    .product_go {
        color: #fbdd21;
    }

    .production_title {
        margin-left: 4px;
    }

    .border_progress {
        width: 0;
        height: 1px;
        background: #bababa;
        position: absolute;
        top: 0;
        transition: .1s all;
    }

    .bottom_tab {
        width: 33%;
        text-align: center;
        float: left;
        color: #c9c9c9;
        padding: 10px 0;
    }

    .bottom_tab_icon {
        width: 44px;
    }

    .bottom_tab_span {
        line-height: 28px;
        border-bottom: 2px solid transparent;
        font-weight: 600;
        font-size: 16px;
        display: inline-block;
        padding: 0 4px;
        transition: .5s all;
    }

    .tab_active .bottom_tab_span {
        border-bottom: 2px solid #fff;
        color: #fff;
    }

    .icon-shoucang {
        transition: .5s all;
    }

    .fabulous_active {
        color: #f44;
        animation: showHeart .5s ease-in-out 0s;
    }

    /*animation-name：用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致*/
    /*animation-duration ：指定元素播放动画所持续的时间*/
    /*animatino-timing-function ： 和transition中的transition-timing-function 中的值一样。根据上面@keframes中分析的animation中可能存在多个小动画，因此这里的值设置是针对每一个小动画所在时间范围内的属性变换速率。*/
    /*animation-delay：定义在浏览器开始执行动画之前等待的时间，这里是指整个animation执行之前的等待时间，而不是上面说的多个小动画*/
    /*animation-iteration-count：定义动画的播放次数，其通常为整数，默认是1,；取值为infinite，动画将无限次的播放。*/
    /*animation-direction：主要用来设置动画播放方向*/
    @keyframes showHeart {
        0% {
            color: #f44;
            transform: scale(1);
        }

        25% {
            color: #fff;
            transform: scale(0);
        }

        80% {
            color: #f44;
            transform: scale(1.2);
        }

        100% {
            color: #f44;
            transform: scale(1);
        }
    }

    /*分享样式*/
    .share_hover {
        position: fixed;
        display: none;

    }

    .share_box {
        position: fixed;
        bottom: -300px;
        width: 100%;
        z-index: 1002;
        background: #fff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        transition: .5s;
    }

    .share_tips {
        text-align: center;
        line-height: 38px;
        color: #333;
    }

    .share_ul {
        box-sizing: border-box;
        padding: 0 25px 25px;
        border-bottom: 1px solid #e8e8e8;
    }

    .share_li {
        float: left;
        width: 33%;
        text-align: center;
    }

    .share_li i {
        font-size: 44px;
    }

    .share_cancel {
        text-align: center;
        line-height: 48px;
        color: #777;
        text-align: center;
    }

    .pengyouquan {
        color: #47D000;

    }

    .pengyouquan_li {
        animation: rotating 8s linear infinite
    }

    @keyframes rotating {
        from {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    .weixin {
        color: #20CA2E;
    }

    .lianjie {
        color: #cdcdcd;
    }

    .share_active {
        bottom: 0px;
    }

    /*评论样式*/
    ::-webkit-input-placeholder {
        color: rgba(0, 0, 0, 0.20);
    }

    :-moz-placeholder {
        color: rgba(0, 0, 0, 0.20);;
    }

    ::-moz-placeholder {
        color: rgba(0, 0, 0, 0.20);
    }

    :-ms-input-placeholder {
        color: rgba(0, 0, 0, 0.20);
    }

    .comment_container {
        width: 100%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .comment_box {
        padding: 0 15px 52px 15px;
    }

    .comment_top {
        text-align: center;
        font-size: 12px;
        color: #000;
        line-height: 40px;
    }

    .guanbi3 {
        float: right;
        font-size: 12px;
        padding: 0 10px;
        position: absolute;
        right: 6px;
    }

    .comment_li {
        margin-bottom: 20px;
        font-size: 14px;
        text-align: left;
    }

    .comment_author_left {
        float: left;
    }

    .comment_author_left img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }

    .comment_author_right {
        margin-left: 46px;
        padding-top: 4px;
    }

    .comment_author_top {
        position: relative;
    }

    .comment_author_name {
        margin-bottom: 6px;
        color: #777;
    }

    .icon-shoucang1_box {
        position: absolute;
        right: 0px;
        top: 0;
        text-align: center;
        color: #777;
    }

    .comment_author_text {
        color: #555;
        margin-bottom: 10px;
        padding-right: 35px;
    }

    .comment_replay_box {
        padding-left: 46px;
        box-sizing: border-box;
    }

    .comment_replay_li {
        margin-bottom: 10px;
    }

    .comment_replay_left {
        float: left;
    }

    .comment_replay_left img {
        width: 25px;
        height: 25px;
        border-radius: 50%;
    }

    .comment_replay_right {
        margin-left: 35px;
        padding-top: 2px;
    }

    .comment_replay_top {
        position: relative;
        margin-bottom: 6px;
    }

    .comment_replay_text {
        padding-right: 35px;
        margin-bottom: 10px;
        color: #555;
    }

    .comment_author_text span, .comment_replay_text span {
        color: #999;
        font-size: 13px;
        margin-left: 6px;
    }

    .shoucang1_num {
        text-align: center;
        width: 30px;
        font-size: 12px;
        /* right: -4px; */
        position: relative;
    }

    .comment_ul {
        height: 400px;
        overflow-y: auto;
    }

    .comment_input_box {
        position: fixed;
        bottom: 0;
        z-index: 2999;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        background: #fff;
        padding: 10px 15px;
        box-sizing: border-box;
    }

    /*.comment_form {*/
    /**/
    /*}*/

    .comment_input {
        border: none;
        resize: none;
        width: 80%;
        float: left;
        color: #555;
        caret-color: #f44;
    }

    .comment_input_right {
        float: right;
    }

    .comment_i {
        font-size: 22px;
        color: #999;
        transition: .3s;
    }

    .comment_i_active {
        color: #f44;
    }

    .icon-zanwupinglun {
        font-size: 100px;
        color: #777;
    }

    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateY(80px);
    }

    .v-enter-active,
    .v-leave-active {
        transition: all .5s ease;
    }

    /*添加进场效果*/
    .v-move {
        transition: all 1s ease;
    }

    .v-leave-active {
        position: absolute;
    }

    .list-complete-item {
        transition: all 1s;
        display: inline-block;
        margin-right: 10px;
    }

    .list-complete-enter, .list-complete-leave-to {
        opacity: 0;
        transform: translateY(30px);
    }

    .list-complete-leave-active {
        position: absolute;
    }

    .love_active {
        color: #f44;
    }

    /*评论样式*/
</style>
